<template>
	<view>
		<image src="/static/sybj.png" class="qjimg" mode=""></image>
		<view class="title">
			<image @click="fanhui" src="/static/zfh.png" :style="'margin-top:'+top+'px;'" mode=""></image>
			<view class="toptit" :style="'margin-top:'+top+'px;'">
				社区资讯
			</view>
			<view class="" style="opacity: 0;">12</view>
		</view>

		<view class="search">
			<view class="">
				<input class="search2" type="text" placeholder="搜索" v-model="seach">
				<image @click="goseach" class="search1" src="/static/search.png" mode=""></image>
			</view>

		</view>
		<view class="boxmax">
			<view class="" style="width: 213rpx;height: 10rpx;">

			</view>
			<view @click="gozixun(item.id)" class="box" v-for="(item,index) in newslist" :key="index">
				<view style="width: 80rpx; height:80rpx; overflow: hidden; ">
					<image class="boximg" src="/static/zixunlog.png" mode="widthFix"></image>
				</view>
				<view class="box1">
					<view class="box1-1">
						<view class="box1-1Z">
							<view class="box1-1Z1">{{item.title}}</view>
							<image v-if="item.isnew" class="box1-1Z2" src="/static/zixunmew.png" mode=""></image>
						</view>
						<view class="box1-1Y">
							{{item.ctime}}
						</view>
					</view>
					<view class="box1-2">
						{{item.desc}}
					</view>
				</view>
			</view>


		</view>


	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				top: '',
				communityId: '',
				xindex: 1,
				seach: '',
				newslist: [],
			}
		},
		onLoad() {

			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.top = menuButtonInfo.top * 1 + 6
			this.communityId = uni.getStorageSync('communityId')
			this.getzixun()
		},
		onReachBottom() {
			this.getzixun()
		},
		methods: {
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			goseach() {
				this.xindex = 1
				this.getzixun(this.seach)
			},
			gozixun(id) {
				uni.navigateTo({
					url: '/pages/communityinfo/communityGonggao?id=' + id
				})
			},
			getzixun(seach) {
				if (this.xindex) {
					this.$post('api/getnews', {
						communityId: this.communityId,
						p: this.xindex,
						keyword: seach
					}, res => {
						console.log(res.data.news);

						if (this.xindex == 1) {
							this.newslist = res.data.news
						} else if (this.xindex) {
							res.data.news.forEach(item => {
								this.newslist.push(item)
							})
						}

						this.xindex = res.data.nextp
						console.log(this.xindex, 'index');
					})
				} else {
					uni.showToast({
						title: '没有内容了',
						icon: 'none'
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(255, 255, 255);
	}

	.qjimg {
		width: 750rpx;
		height: 603rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.toptit {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 20rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}
	}

	.top {
		z-index: 2;
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
	}

	.top1img {
		width: 40rpx;
		height: 72rpx;
	}

	.toptext {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #000000;
		line-height: 20rpx;
	}

	.zxtitle {
		width: 90vw;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		padding-top: 160rpx;
	}

	.zxtitle1 {
		display: flex;

	}

	.zxtitle1text {
		font-size: 20rpx;
		margin: 0 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 20px;
	}

	.zxtitle1textpro {
		font-size: 30rpx;
		margin: 0 20rpx;
		border-bottom: #FE7B00 solid 2px;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #FE7B00;
		line-height: 20px;
	}

	.zxtitle2 {
		display: flex;
		align-items: center;
	}

	.zxtitle2text {
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #333333;
		line-height: 20rpx;
	}

	.zxtitle2img {
		width: 26rpx;
		height: 23rpx;
	}

	.search {
		width: 686rpx;
		height: 99rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		background-color: #ffffff;
		border-radius: 50px;

		>view {
			width: 650rpx;
			height: 99rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.search1 {
		width: 40rpx;
		height: 40rpx;
	}

	.search2 {
		width: 500rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 30rpx;
	}

	.boxmax {
		width: 686rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 30rpx auto;
	}

	.box {
		margin: 0rpx 20rpx;
		margin-top: 20rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eceaea;
	}

	.boximg {
		width: 100%;
	}

	.box1 {
		width: 520rpx;
	}

	.box1-1 {
		display: flex;
		justify-content: space-between;
	}

	.box1-1Z {

		display: flex;
		align-items: center;
	}

	.box1-1Z1 {
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 700;
		color: #333333;
		width: 280rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		line-height: 42rpx;
	}

	.box1-1Z2 {
		margin-left: 20rpx;
		width: 26rpx;
		height: 20rpx;
	}

	.box1-2 {
		width: 500rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.box1-1Y {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 42rpx;
	}

	.xian {
		width: 90vw;
		margin: 0 auto;
		height: 2px;
	}
</style>
